<template>
  <div class="container">
    <div class="qr-print">
      <div class="qr-print_left">
        <div class="qr-print_left__header">已存在二维码补打印</div>
        <div class="qr-print_left__input">
          <el-input type="textarea" :rows="26" v-model="text" />
        </div>
        <div class="qr-print_left__print">
          <el-button type="info" plain @click="handlePrintLeft"> 打印 </el-button>
        </div>
      </div>
      <div class="qr-print_right">
        <div class="qr-print_right__header">不在的二维码创建并打印</div>
        <div class="qr-print_right__content">
          <el-alert style="text-align: left" :closable="false" type="warning" show-icon>
            <span slot-scop="description">
              新创建二维码需要对该库位进行盘点， 创建的二维码直接出现在盘点明细里面
              一定要确认原有的二维码全部扫完
            </span>
          </el-alert>
          <el-form style="margin: 20px 0" ref="elForm" :model="form" :rules="rules">
            <el-form-item label="未审核的盘点单" prop="checkId">
              <el-select
                @change="
                  (checkId) => {
                    getSpNoList(checkId)
                    form.checkPositionId = ''
                  }
                "
                style="width: 100%"
                v-model="form.checkId">
                <el-option
                  :label="item.createTime"
                  :value="item.id"
                  :key="item.id"
                  v-for="item in unAuditList" />
              </el-select>
            </el-form-item>
            <el-form-item label="库位" prop="checkPositionId" v-if="form.checkId">
              <el-select @change="handlePositionId" style="width: 100%" v-model="form.checkPositionId">
                <el-option
                  :label="item.positionNoSkuNo"
                  :value="item.id"
                  :key="item.id"
                  v-for="item in spNoList" />
              </el-select>
            </el-form-item>
            <el-form-item
              v-hasPermi="['distribution:stockCheck:getNumByCheckPositionId']"
              label="新创建数量"
              prop="num"
              v-show="form.checkPositionId">
              <el-input readonly v-model.number="form.num">
                <span
                  v-hasPermi="['distribution:stockCheck:getNumInfoByCheckPositionId']"
                  style="cursor: pointer"
                  slot="append"
                  @click="handleCreatedSerialNum">
                  查看
                </span>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <QR
      title="详情"
      :dialogVisible="qr.show"
      :addprintNum="4"
      :janCodeList="[5, 6, 7, 8]"
      :barcodeNum="qr.qrData"
      @handleClose="qr.show = false" />
    <CreatedSerialNum
      @getList="handleGetList"
      :type="createdSerialNum.type"
      :show.sync="createdSerialNum.show"
      :title="createdSerialNum.title"
      :formData="createdSerialNum.formData" />
  </div>
</template>

<script>
import {
  getNumByCheckPositionId,
  getStockCheckPositionUnaudited,
  getStockCheckUnaudited,
  printSerialByCheckIdCheckPositionId,
} from '@/api/distribution/sku/qrPrint'
import QR from '@/components/QrCode/index.vue'
import CreatedSerialNum from './components/createdSerialNum.vue'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: {
    QR,
    CreatedSerialNum,
  },

  name: 'QrPrint',
  data() {
    return {
      /**回显已创建序列号的个数 */
      createdSerialNum: {
        /**显示详情 */
        show: false,
        type: '',
        formData: {},
      },
      qr: {
        show: false,
        qrData: [],
      },
      text: '',
      form: {
        checkId: '',
        checkPositionId: '',
        num: 0,
      },
      rules: {
        checkId: [
          {
            required: true,
            message: this.$t('请选择'),
            trigger: 'blur',
          },
        ],
        checkPositionId: [
          {
            required: true,
            message: this.$t('请选择'),
            trigger: 'blur',
          },
        ],
        num: [
          {
            required: true,
            message: this.$t('请输入'),
            trigger: 'blur',
          },
        ],
      },
      /**未审核 */
      unAuditList: [],
      /**库位列表 */
      spNoList: [],
    }
  },
  created() {
    this.getUnAuthList()
  },
  methods: {
    handleGetList() {
      getNumByCheckPositionId({ checkPositionId: this.form.checkPositionId }).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.form.num = data.num
          this.form.checkPositionId = data.checkPositionId
        }
      })
    },
    handlePositionId(id) {
      if (id) {
        getNumByCheckPositionId({ checkPositionId: id }).then((res) => {
          const { code, data, msg } = res
          if (code === 200) {
            this.form.num = data.num
            this.form.checkPositionId = data.checkPositionId
          }
        })
      }
    },
    handleCreatedSerialNum() {
      this.createdSerialNum.formData = this.form
      this.createdSerialNum.show = true
    },
    handlePrintLeft() {
      const text = JSON.parse(JSON.stringify(this.text))
      const strArr = text.split('\n')
      const targetArr = []
      let flag = false
      strArr.map((item) => {
        if (item.trim().length == 19) {
          targetArr.push(item.trim())
        } else {
          flag = true
        }
      })
      if(flag) return this.$message.error('序列号内容应该为19位')
      console.log(`targetArr ==>`, targetArr)
      this.qr.show = true
      this.qr.qrData = targetArr.map((i) => {
        return {
          ...i,
          id: i,
          skuNo: '(re)',
        }
      })
    },
    handlePrintRight() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          console.log(`valid==>`)
          const skuId = this.spNoList.filter((i) => i.id == this.form.checkPositionId)[0]?.skuId
          printSerialByCheckIdCheckPositionId({ ...this.form, skuId }).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.qr.show = true
              this.qr.qrData = data.map((i) => {
                return {
                  ...i,
                  id: i.skuSerialId,
                  skuNo: '(re)',
                }
              })
            }
          })
        }
      })
    },
    getUnAuthList() {
      getStockCheckUnaudited().then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.unAuditList = data
        }
      })
    },
    getSpNoList(checkId) {
      getStockCheckPositionUnaudited(checkId).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.spNoList = data
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
$border: 2px solid #1e1919;
$padding: 30px;
.container {
  min-height: calc(100vh - 84px);
  display: flex;
  align-items: center;
  justify-content: center;
  .qr-print {
    width: 80%;
    height: 700px;
    border: $border;
    border-radius: 5px;
    display: flex;
    &_left {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-right: $border;
      &__header {
        text-align: center;
        margin: 5px;
      }
      &__input {
        margin-top: 10px;
        width: 88%;
        ::v-deep textarea {
          outline: 2px solid;
        }
      }
      &__print {
        margin-top: 10px;
        margin-right: 60px;
        width: 100%;
        text-align: right;
      }
    }
    &_right {
      flex: 1;
      &__header {
        text-align: center;
        margin: 5px;
      }
      &__content {
        text-align: center;
        margin: 5px;
        padding: 20px;
      }
      &__print {
        margin-right: 25px;
        text-align: right;
      }
    }
  }
}
</style>
